Nipun Kalra's profile

Flash messages: Case study

Ever since I started my UX designing journey i have only made designs and didn't even thought about giving a feedback on my own design or sharing the process i go through to designing these projects even though i have no clients. I have been finding project topics from daily UI challenges and this time i got a feedback from a random discord user who is also UX designer but wishes not to be included in this case study, in the feedback he pointed out that my portfolio have good design for starters but there is no feedback from own self, about how i made this design? or why i made this? and what problems i had? as well as what i could have done better in these designs? Hence my first case study ever on my design.

Preamble
When you copy files, download a movie, login into a social or email site; you see elements pop up, loading screens informing your progress, and to show progress success or failed designers make sure to add flash messages in case any error occurs.

It’s very easy to proceed or show a success message/feedback than an error message. In life too, we hardly complain or have issues with progress so far the outcome is satisfactory. All we need is just a statement that confirms that.

But this is not the same for ERROR messages, designers need to communicate the error in the best possible way to avoid annoying the users or get them more frustrated. Which brings us to our first question.

So what constitutes a great error message?
Nielson and Norman Group summarized that in an article on error messages that:

Established wisdom holds that good error messages are polite, precise, and constructive. The Web brings a few new guidelines: Make error messages are clearly visible, reduce the work required to fix the problem, and educate users along the way.

A good error message:

1. does not blame the user.
2. it’s precise.
3. suggests how to fix or what to do next after an error.
4. has no code — always in a human readable format.
5. states clearly that something went wrong.
6. visible and highly noticed.
So looking at the design:
1. Does it blame the user when an error occurs? No
2. Is the message precise and reassuring? Yes
3. Suggest how to fix or what to do next? Yes for both, even the error message gave a “Close pop up(X)" option too. In case the user is tired of retrying or wants to just proceed.
4. No code like “404 error, abcx1000231329 error, etc. It’s human readable.
It’s also very visible and highly noticed.
5. And lastly a bit of fun with the illustrations. At least it will ease off some frustrated people and reassure others during success.
Flash messages: Case study
Published:

Owner

Flash messages: Case study

Published:

Tools

Creative Fields